<template>
	<view class="container">
		<view class="main">
			<view class="item" v-for="addr in addressLists" :key="addr.id">
				<AddressCard 
					v-bind="addr" 
					@changeactive="changeactive"
					@delAddr="delAddr"
					@editAddr="editAddr"
				/>
			</view>
		</view>

		<view class="submit-wrap">
			<view class="submit" @click="addAddr">+ 添加新地址</view>
		</view>
	</view>
</template>

<script setup>
	import AddressCard from './AddressCard.vue'
	import { addressList, addressDefault } from '@/service/index.ts'
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	const addressLists = ref([])
 
	onShow(() => {
		getAddressList()
	})

	// 获取地址列表
	const getAddressList = () => {
		addressList().then(res => {
			addressLists.value = res
		})
	}
	const list = [{
			id: 0,
			name: '徐局',
			phone: '',
			address: '',
			active: true,
		},
		{
			id: 1,
			name: '徐局',
			phone: '13988886165',
			address: '福建省厦门市集美区中山南路中北春城三期43栋3单元502室',
		},
		{
			id: 2,
			name: '徐局',
			phone: '13988886165',
			address: '福建省厦门市集美区中山南路中北春城三期43栋3单元502室',
		},
		// {
		// 	id: 3,
		// 	name: '徐局',
		// 	phone: '13988886165',
		// 	address: '福建省厦门市集美区中山南路中北春城三期43栋3单元502室',
		// }
	];
	// 修改默认地址
	const changeactive = (id) => {
		addressDefault({id:id}).then(res => {
			wx.showToast({
				title: '设置成功',
				icon: 'success',
				duration: 2000
			})
			getAddressList()
		})
	}
	// 删除地址
	const delAddr = (id) => {
		console.log('删除成功');
	}
	// 新增地址
	const addAddr = () => {
		uni.navigateTo({
			url: '/pages/business/address/index'
		})
	}
	// 修改地址
	const editAddr = (id) => {
		uni.navigateTo({
			url: `/pages/business/address/index?id=${id}`
		})
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		padding: 0 28rpx 0;
		background: $body-bc;
		color: $content-color;

		.main {
			padding-top: 32rpx;
			flex: 1;

			.item+.item {
				margin-top: 22rpx;
			}
		}

		.submit-wrap {
			padding: 40rpx 0;

			.submit {
				width: 75%;
				margin: 0 auto;
				padding: 26rpx 0;
				// border: 1rpx solid $primary-color;
				border-radius: 15rpx;
				font-size: 30rpx;
				color: $primary-color;
				text-align: center;
				background: url(https://haoyingshou.oss-cn-guangzhou.aliyuncs.com/merchant_bc.png) no-repeat center / 100% 100%;
			}
		}
	}
</style>